<template>
  <div class="main-list">
    <!-- navbar -->
    <div class="nav-bar weui-tab">
      <div class="weui-navbar">
        <div
          class="weui-navbar__item nav-item"
          :class="{'active':type==index+1}"
          v-for="(item,index) in navConfig"
          @click="toggleBar(index)"
          :key="index"
        >
          {{item.name}}
        </div>

      </div>
      <div class="weui-tab__panel">

      </div>
    </div>
    <!-- search -->
    <div
      class="weui-search-bar"
      id="searchBar"
    >
      <view>
        <picker
          class="select"
          @change="selectChange"
          :range="selectArr"
        >
          <view class="picker">{{ selectArrName }}</view>
        </picker>
      </view>

      <form class="weui-search-bar__form">

        <div class="weui-search-bar__box">
          <i
            class="weui-icon-search"
            @click="loadOrderByCondition"
          ></i>
          <input
            type="search"
            class="weui-search-bar__input"
            id="searchInput"
            placeholder="请输入"
            required=""
            v-model="searchValue"
          >
          <a
            href="javascript:"
            class="weui-icon-clear"
            id="searchClear"
            v-if="searchValue"
            @click="clear"
          ></a>
        </div>
      </form>
    </div>
    <div class="order-content">
      <checkbox-group @change="selectGood">
        <div
          class="list-wrap"
          v-for="(item,index) in goods"
          :key="index"
        >
          <div class="list-title"><img
              class="img item-title-img"
              src="/static/images/pinduoduo.png"
            ></img>
            <span style="margin-left:5px;">{{ item.trades[0].shopName ? item.trades[0].shopName : '' }}</span>
          </div>
          <div class="list-content clearfix">
            <div class="list-content-title">
              <checkbox
                :checked="item.checked"
                :id="'item'+index"
                :value="index"
                name="orderRadio"
              ></checkbox>
              <!-- <input
                :checked="item.checked"
                type="checkbox"
                :id="'item'+index"
                class="circle"
                name="orderRadio"
                :value="index"
              /> -->
              <label :for="'item'+index">{{ item.trades[0].tradeNo ? item.trades[0].tradeNo : ''}}</label>
              <span class="date">{{ item.dingdanriqi ? item.dingdanriqi : '' }}</span>
              <span class="time">{{ item.dingdanshijian ?  item.dingdanshijian : ''}}</span>
              <a class="printf">{{ item.dayinzhuangtai ? item.dayinzhuangtai : ''}}</a>
            </div>
            <div
              class="goods"
              v-for="(trade,key) in item.goods"
              :key="key"
            >
              <div class="goods-title">
                <p class="goods-code"><span class="grey">商品编码：</span>{{ trade.goodsNo ? trade.goodsNo : '' }}</p>
                <p class="goods-number"><span class="grey">货号：</span>{{ trade.articleNo ? trade.articleNo : '' }}</p>
              </div>
              <div class="goods-content clearfix">
                <img
                  :src="trade.picPath"
                  alt=""
                  class="fl goods-img"
                >
                <div class="goods-des ">
                  <div class="goods-word">{{ trade.goodsName ? trade.goodsName : '' }}</div>
                  <span class="size">{{ (trade.goodsProps != null) ? trade.goodsProps : '' }}</span>
                  <span class="money">￥{{ (trade.price != null) ? trade.price / 100 : '' }}</span>
                  <span class="num">x{{ (trade.quantity!= null) ? trade.quantity : '' }}</span>
                </div>
              </div>
            </div>
            <div class="item-count">
              <span class="fr">实收款<span class="red">¥{{ (item.trades[0].payAmount != null) ? item.trades[0].payAmount / 100 : '' }}</span></span>
              <span class="fr">订单金额<span class="red">¥{{(item.orderAmount != null) ? item.orderAmount / 100 : ''  }}</span>（含运费）</span>
              <span class="goods-sum fr">
                共<span class="blank">{{ item.goods.length }}</span>件商品
              </span>

            </div>
          </div>
          <div class="list-foot">
            <div
              class="address"
              @click="editRen(item)"
            >
              <img
                src="/static/images/shoujianren.png"
                alt=""
                class="address-img"
              >

              <p class="consignee clearfix">
                <span class="people fl">收件人：<span class="name">{{ item.receiverName ? item.receiverName : ''}}</span>
                </span>
                <span class="postcode fl">{{ item.receiverPhone ?  item.receiverPhone : '' }}</span>
                <span class="phone fr">{{ item.receiverMobile ?  item.receiverMobile : '' }}</span>
              </p>

              <p class="consignee">收件地址：{{ item.receiverFullAddress ? item.receiverFullAddress : '' }}</p>
              <div
                class="add-ren-ft"
                v-if="type == 1"
              ></div>
            </div>
            <div
              class="message"
              @click="editComment(item)"
            >
              <p class="msg "><span class="grey">留言：</span>{{item.trades[0].buyerMessage ? item.trades[0].buyerMessage : ''}}</p>
              <p class="notes"><span class="grey">备注：</span>{{ item.trades[0].sellerMessage ?  item.trades[0].sellerMessage  : ''}}</p>
              <div
                class="add-ren-ft"
                v-if="type == 1"
              ></div>
            </div>
            <div class="deliver">
              <span class="deliver-num"><span class="grey fl">运单号：</span> {{  item.logisticsNo ? item.logisticsNo : '' }}
                <img v-show="item.logisticsNo" @click="doCopy(item.logisticsNo)" src="/static/images/fuzhi.png" /></span>
              <span class=fr>{{ item.logisticsCompanyName ? item.logisticsCompanyName : '' }}</span>
            </div>

            <div
              class="solve-btn"
              v-if="type == 1"
            >
              <div
                class="post-btn fr"
                @click="fahuo(item.orderNo)"
              >发货</div>
              <div
                class="printf-btn fr"
                @click="dayin(item)"
              >打印快递单</div>
            </div>
          </div>
        </div>
      </checkbox-group>
    </div>
    <!-- foot -->
    <div
      class="foot"
      v-if="type == 1"
    >

      <input
        type="checkbox"
        name="checkAllRadio"
        class="fl bottom-radio"
        @click="selectAll"
        :checked="checkAll"
      />
      <span
        class="fl radio-text"
        :class="{'active':checkAll}"
      >全选</span>
      <a
        class="order-bottom-btn2 fr"
        @click="fahuo('')"
      >发货</a>
      <a
        class="order-bottom-btn1 fr"
        @click="dayin('')"
      >打印快递单</a>

      <span class="fr order-count-text">已选中<span class="order-count-num">{{ selectIndex.length }}</span>个</span>

    </div>
    <div
      class="printInfoDialog"
      v-if="fahuoflag"
    >
      <div class="tankuang-main">
        <div
          class="title"
          v-if="fahuozhong"
        >已发货{{ dangqianfahuo }}单/共{{  fahuozongshu }}单</div>
        <div
          class="title"
          v-if="fahuowancheng"
        >发货成功{{ chenggongshu }}单，失败<span style="color: red">{{ shibaishu }}</span>单</div>
        <div
          class="content"
          v-if="fahuozhong"
        >
          <div>正在发货，<span style="color: red">请勿刷新页面</span></div>
        </div>
        <div
          class="content" style="overflow-y:auto;max-height: 300px"
          v-if="fahuowancheng"
        >
          <div
            v-for="(value, key, index) in fahuoList"
            :key="index"
          >
            <p>{{key}}:{{ value }}</p>
          </div>
        </div>
        <div class="tankuang-caozuo" @click="doConfirm" v-if="fahuowancheng">
          <a
            class="confirm"
          >确定</a>
        </div>
      </div>
    </div>
    <mytoast ref="mytoast" />

  </div>

</template>

<script>
import api from "@/utils/api";
import check from "@/utils/check";
import printInfoDialogs from "@/components/printInfoDialog";
import mytoast from "@/components/toast";

export default {
  components: { printInfoDialogs, mytoast },

  data() {
    return {
      type: 1, // 1 待发货 2 已发货 3 退款中 4 全部
      checkAll: 0,
      navConfig: [
        //navbar 配置
        {
          name: "待发货"
        },
        {
          name: "已发货"
        },
        {
          name: "退款中"
        },
        {
          name: "全部订单"
        }
      ],
      goods: [],
      selectIndex: [],
      pageNo: 1,

      selectArrObj: [],
      selectArr: [],
      selectArrName: "请选择",
      selectArrIndex: "",
      searchValue: "",

      fahuoflag: false,
      fahuoList: [],
      fahuozhong: false,
      fahuowancheng: false,
      fahuozongshu: 0,
      dangqianfahuo: 0,
      chenggongshu: 0,
      shibaishu: 0
    };
  },

  onLoad: function(options) {
    this.type = options.type;
    if (this.type == 1 || this.type == 2 || this.type == 4) {
      this.selectArrObj = [
        { name: "订单编号", code: "15" },
        { name: "快递单号", code: "16" },
        { name: "收件人", code: "17" },
        { name: "手机号", code: "18" },
        { name: "商品编码", code: "629" }
      ];
      this.selectArr = ["订单编号", "快递单号", "收件人", "手机号", "商品编码"];
    } else if ((this.type = 3)) {
      this.selectArrObj = [
        { name: "订单编号", code: "15" },
        { name: "收件人", code: "17" },
        { name: "手机号", code: "18" },
        { name: "商品编码", code: "629" }
      ];
      this.selectArr = ["订单编号", "收件人", "手机号", "商品编码"];
    }
    this.loadOrder();
    this.loadCondition();
  },

  computed: {},

    onReachBottom(){
        console.log("上拉了")
    },

  onShow() {
      this.checkAll = 0;
      this.goods = [];
      this.selectIndex = [];
      this.pageNo = 1;
      this.fahuoflag = false;
      this.fahuoList = [];
      this.fahuozhong = false;
      this.fahuowancheng = false;
      this.fahuozongshu = 0;
      this.dangqianfahuo = 0;
      this.chenggongshu = 0;
      this.shibaishu = 0;
      this.loadOrder();
  },

  created() {},
  methods: {
    clear() {
      this.searchValue = "";
    },

    loadCondition() {
      var _this = this;
      wx.request({
        url:
            wx.getStorageSync("otherPath") + api.queryTradeStatusSearchCondition +
          "?ecstoken=" +
          wx.getStorageSync("sessionId"),
        method: "POST",
          header: {
              ecstoken : wx.getStorageSync('sessionId'),
              fslb : wx.getStorageSync('fslb')
          },
        data: {},
        success(res) {},
        fail() {
          _this.$refs.mytoast.show("网络异常");
        }
      });
    },

    selectChange(e) {
      var index = e.mp.detail.value;
      this.selectArrIndex = index;
      this.selectArrName = this.selectArr[index];
    },

    getSelectArrObj() {
      if (this.type == 1 || this.type == 2 || this.type == 4) {
        this.selectArrObj = [
          { name: "订单编号", code: "15" },
          { name: "快递单号", code: "16" },
          { name: "收件人", code: "17" },
          { name: "手机号", code: "18" },
          { name: "商品编码", code: "629" }
        ];
      } else if ((this.type = 3)) {
        this.selectArrObj = [
          { name: "订单编号", code: "15" },
          { name: "收件人", code: "17" },
          { name: "手机号", code: "18" },
          { name: "商品编码", code: "629" }
        ];
      }
    },

    getSelectArr() {
      if (this.type == 1 || this.type == 2 || this.type == 4) {
        this.selectArr = [
          "订单编号",
          "快递单号",
          "收件人",
          "手机号",
          "商品编码"
        ];
      } else if ((this.type = 3)) {
        this.selectArr = ["订单编号", "收件人", "手机号", "商品编码"];
      }
    },

      loadOrderByCondition(){
        if(check.isNull(this.selectArrIndex)){
            this.$refs.mytoast.show("请选择查询条件");
            return;
        }
          if(check.isNull(this.searchValue)){
              this.$refs.mytoast.show("请输入"+this.selectArrObj[this.selectArrIndex].name);
              return;
          }
          this.loadOrder();
      },


    loadOrder() {
      var _this = this;
      var tradeStatus = "all";
      var refundStatus = "all";
      if (this.type == 1) {
          tradeStatus = "24";
          refundStatus = "all";
      } else if (this.type == 2) {
        tradeStatus = "25";
        refundStatus = "all";
      } else if (this.type == 3) {
        tradeStatus = "all";
        refundStatus = "yes";
      } else if (this.type == 4) {
        tradeStatus = "all";
        refundStatus = "all";
      }
      var formData = {
          needRefresh: 1,
        tradeStatus: tradeStatus,
        refundStatus: refundStatus,
          isPlamform : true
      };
      if (this.selectArrIndex) {
        formData.searchKey = this.selectArrObj[this.selectArrIndex].code;
        formData.searchValue = this.searchValue.trim();
      }
      wx.request({
        url: wx.getStorageSync("otherPath") + api.concernOrder + "?ecstoken=" + wx.getStorageSync("sessionId"),
        method: "POST",
        data: formData,
          header: {
              'Content-Type': 'application/x-www-form-urlencoded',
              ecstoken : wx.getStorageSync('sessionId'),
              fslb : wx.getStorageSync('fslb')
          },
        success(res) {
          var list = res.data.data.page.data[0].data;
          for (var i in list) {
            list[i].checked = false;
            if (_this.selectIndex.indexOf(i) > -1) {
              list[i].checked = true;
            }
            list[i].dingdanriqi = _this.dingdanriqi(list[i].sourceCreateDate);
            list[i].dingdanshijian = _this.dingdanshijian(
              list[i].sourceCreateDate
            );
            list[i].dayinzhuangtai = _this.dayinzhuangtai(list[i].printStatus);
          }
          _this.goods = list;
        },
        fail() {
          _this.$refs.mytoast.show("网络异常");
        }
      });
    },

    add0(m) {
      return m < 10 ? "0" + m : m;
    },

    dingdanriqi(time) {
      //timestamp是整数，否则要parseInt转换,不会出现少个0的情况
      var time = new Date(time);
      var year = time.getFullYear();
      var month = time.getMonth() + 1;
      var date = time.getDate();
      return year + "-" + this.add0(month) + "-" + this.add0(date);
    },
    dingdanshijian(time) {
      var time = new Date(time);
      var hours = time.getHours();
      var minutes = time.getMinutes();
      var seconds = time.getSeconds();
      return (
        this.add0(hours) + ":" + this.add0(minutes) + ":" + this.add0(seconds)
      );
    },
    dayinzhuangtai(flag) {
      if (flag == "0") {
        return "未打印";
      }
      if (flag == "1") {
        return "已打印";
      }
    },

    selectGood(e) {
      var _this = this;
      console.log(e);
      this.selectIndex = e.mp.detail.value;
      for (var j in this.goods) {
        _this.goods[j].checked = false;
      }
      for (var i in this.selectIndex) {
        _this.goods[this.selectIndex[i]].checked = true;
      }
      if (this.selectIndex.length == this.goods.length) {
        this.checkAll = true;
      } else {
        this.checkAll = false;
      }
    },

    selectAll() {
      var _this = this;
      this.checkAll = this.checkAll == 0 ? 1 : 0;
      this.selectIndex = [];
      if (this.checkAll == 1) {
        for (var i in this.goods) {
          _this.selectIndex.push(i);
          _this.goods[i].checked = true;
        }
      } else {
        for (var i in this.goods) {
          _this.goods[i].checked = false;
        }
      }
    },

      doCopy(yundanhao){
          wx.setClipboardData({
              data: yundanhao,
              success(res) {
                  console.log(res);
              }
          });
      },

    toggleBar(index) {
      this.type = index + 1;
      if (this.type == 1 || this.type == 2 || this.type == 4) {
        this.selectArrObj = [
          { name: "订单编号", code: "15" },
          { name: "快递单号", code: "16" },
          { name: "收件人", code: "17" },
          { name: "手机号", code: "18" },
          { name: "商品编码", code: "629" }
        ];
        this.selectArr = [
          "订单编号",
          "快递单号",
          "收件人",
          "手机号",
          "商品编码"
        ];
      } else if ((this.type = 3)) {
        this.selectArrObj = [
          { name: "订单编号", code: "15" },
          { name: "收件人", code: "17" },
          { name: "手机号", code: "18" },
          { name: "商品编码", code: "629" }
        ];
        this.selectArr = ["订单编号", "收件人", "手机号", "商品编码"];
      }
      this.loadOrder();
    },
    editRen(item) {
      if (this.type != 1) {
        return;
      }
      var orderNo = item.orderNo;
      var addr = {
        receiverName: item.receiverName,
        phone: item.receiverPhone,
        mobile: item.receiverMobile,
        province: item.receiverProvince,
        city: item.receiverCity,
        district: item.receiverCounty,
        receiverAddress: item.receiverAddress,
        fullAddr: item.receiverFullAddress
      };
      var addrStr = JSON.stringify(addr);
      var url =
        "../orderren/main?addr=" +
        encodeURIComponent(addrStr) +
        "&orderNo=" +
        orderNo;
      mpvue.navigateTo({ url });
    },
    editComment(item) {
      if (this.type != 1) {
        return;
      }
      var orderNo = item.orderNo;
      var markLevel = item.markLevel;
      var sellerMessage = item.trades[0].sellerMessage ? item.trades[0].sellerMessage : '';
      var addr = {
        receiverName: item.receiverName,
        phone: item.receiverPhone,
        mobile: item.receiverMobile,
        province: item.receiverProvince,
        city: item.receiverCity,
        district: item.receiverCounty,
        receiverAddress: item.receiverAddress,
        fullAddr: item.receiverFullAddress
      };
      var addrStr = JSON.stringify(addr);
      var url =
        "../comment/main?orderNo=" +
        orderNo +
        "&markLevel=" +
        markLevel +
        "&sellerMessage=" +
        sellerMessage +
        "&addr=" +
        addrStr;
      mpvue.navigateTo({ url });
    },
    fahuo(orderNo) {
      var _this = this;
      var orderNoList = [];
      if (orderNo) {
        orderNoList.push(orderNo);
      } else {
        for (var i in this.selectIndex) {
          orderNoList.push(this.goods[this.selectIndex[i]].orderNo);
        }
      }
      if (orderNoList.length < 1) {
        _this.$refs.mytoast.show("请选择需要发货的订单");
        return;
      }
      var guid = _this.guid();
      wx.request({
        url:
            wx.getStorageSync("otherPath") + api.consigns +
          "?ecstoken=" +
          wx.getStorageSync("sessionId") +
          "&randomID=" +
          guid,
          header: {
              'Content-Type': 'application/x-www-form-urlencoded',
              ecstoken : wx.getStorageSync('sessionId'),
              fslb : wx.getStorageSync('fslb')
          },
        method: "POST",
        data: {
          orderNos: orderNoList
        },
        success(res) {
          if (res.data.data.isSuccess) {
            _this.fahuoflag = true;
            _this.fahuozhong = true;
            var t = setTimeout(function() {
              wx.request({
                url:
                    wx.getStorageSync("otherPath") + api.queryDataProcessInfo +
                  "?ecstoken=" +
                  wx.getStorageSync("sessionId"),
                  header: {
                      'Content-Type': 'application/x-www-form-urlencoded',
                      ecstoken : wx.getStorageSync('sessionId'),
                      fslb : wx.getStorageSync('fslb')
                  },
                method: "POST",
                data: {
                  randomID: guid
                },
                success(res) {
                  var data = res.data.data;
                  _this.fahuoList = data.processedResult.failNos;
                  if (data.processedDataNum != data.totalDataNum) {
                    _this.fahuozhong = true;
                    _this.fahuowancheng = false;
                    _this.fahuozongshu = data.totalDataNum;
                    _this.chenggongshu = data.processedDataNum;
                  } else {
                    _this.fahuozhong = false;
                    _this.fahuowancheng = true;
                    _this.chenggongshu =
                      data.totalDataNum -
                      data.processedResult.consignFailInfoList.length;
                    _this.shibaishu =
                      data.processedResult.consignFailInfoList.length;
                    clearTimeout(t);
                    _this.loadOrder();
                  }
                },
                fail() {
                  _this.$refs.toast.show("网络异常");
                  clearTimeout(t);
                }
              });
            }, 500);
          } else {
            _this.$refs.mytoast.show("发货失败");
          }
        },
        fail() {
          _this.$refs.mytoast.show("网络异常");
        }
      });
    },

    doConfirm() {
      this.fahuoflag = false;
      this.fahuoList = [];
      this.fahuozhong = false;
      this.fahuowancheng = false;
      this.fahuozongshu = 0;
      this.dangqianfahuo = 0;
      this.chenggongshu = 0;
      this.shibaishu = 0;
      this.checkAll = 0;
      this.selectIndex = [];
      for(var i in this.goods){
          this.goods[i].checked = false;
      }
      console.log("数据恢复")
    },
    dayin(order) {
      var _this = this;
      var orderNoList = [];
      if (order) {
        orderNoList.push({
            orderNo : order.orderNo,
            isSelectShipper : order.orderExt.isSelectShipper
        });
      } else {
        for (var i in this.selectIndex) {
          orderNoList.push({
              orderNo : _this.goods[_this.selectIndex[i]].orderNo,
              isSelectShipper : _this.goods[_this.selectIndex[i]].orderExt.isSelectShipper
          });
          
        }  
      }
      if (orderNoList.length < 1) {
        this.$refs.mytoast.show("请选择需要打印的订单");
        return;
      }
      var url =
        "../dingdandayin/main?orderNolist=" + JSON.stringify(orderNoList);
      mpvue.navigateTo({ url });
    },
    guid() {
      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(
        c
      ) {
        var r = (Math.random() * 16) | 0,
          v = c == "x" ? r : (r & 0x3) | 0x8;
        return v.toString(16);
      });
    }
  }
};
</script>

<style lang="wxss">
page {
  width: 100%;
  height: 100%;
  background-color: #f7fbff;
}
checkbox .wx-checkbox-input {
  width: 30rpx;
  height: 30rpx;
  border: 4rpx solid #999;
  border-radius: 100%;
}
/*复选框外框选中样式*/
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  border-color: #0077ff;
  background-color: #0077ff;
}
/*复选框选中后内部样式*/
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  content: "\00a0";
  display: inline-block;
  border: 4rpx solid #fff;
  border-top-width: 0;
  border-right-width: 0;
  width: 18rpx;
  height: 10rpx;
  transform: rotate(-50deg);
  position: absolute;
  top: 8rpx;
  left: 6rpx;
}
/* 输入框 */
.weui-search-bar {
  position: relative;
  width: 100%;
  height: 81rpx;
  background-color: #f7fbff;
}
.select {
  position: absolute;
  top: 17rpx;
  left: 45rpx;
  width: 23%;
  height: 50rpx;
  /* border-radius: 25rpx; */
  border-right: 1rpx solid #e8eaf0;
  font-size: 26rpx;
  line-height: 50rpx;
  color: #373e4f;
  font-weight: 500;
  z-index: 10;
}
.select::after {
  content: "";
  display: inline-block;
  position: absolute;
  right: 20rpx;
  top: 14rpx;
  width: 14rpx;
  height: 14rpx;
  border-right: 1rpx solid #888;
  border-top: 1rpx solid #888;
  -webkit-transform: rotate(135deg); /*箭头方向可以自由切换角度*/
  transform: rotate(135deg);
}
.weui-search-bar {
  padding: 16rpx 30rpx;
}
.weui-search-bar .weui-search-bar__form {
  width: 85%;
  height: 50rpx;
  margin: 0 auto;
  border-radius: 25rpx;
  box-shadow: 0px 1rpx 6rpx 0px rgba(0, 119, 255, 0.16);
}
.weui-search-bar__box {
  padding-left: 240rpx;
}
.weui-search-bar__box .weui-search-bar__input {
  height: 100%;
  font-size: 26rpx;
  line-height: 50rpx;
  padding: 0;
}
/* 调整搜索的起始位置 */
.weui-search-bar__box .weui-icon-search {
  left: 200rpx;
}
</style>

<style scoped>
.fl {
  float: left;
}

.fr {
  float: right;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.weui-navbar {
  height: 1rem;
  line-height: 1rem;
}

.weui-navbar__item::after {
  display: none;
}

/* nav */

.nav-item {
  display: inlinea-block;
  font-family: PingFang SC;
  font-size: 0.28rem;
  font-weight: 500;
  color: rgba(118, 125, 143, 1);
  line-height: 0.3rem;
  border: none;
  background: #fff;
}

.nav-item.active {
  color: #0077ff;
}

.nav-item.active::before {
  content: "";
  display: block;
  position: absolute;
  width: 80%;
  height: 2px;
  bottom: 0;
  left: 10%;
  background: #0077ff;
}

.foot {
  text-align: center;
  vertical-align: middle;
  width: 100%;
  height: 40px;
  position: fixed;
  bottom: 0;
  background-color: #ffffff;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 40px;
}

/* content */
.order-content {
  padding-bottom: 0.8rem;
}

.list-wrap {
  width: 100%;
  background: #fff;
  margin-bottom: 0.2rem;
  box-shadow: 0px 2px 4px 0px rgba(7, 127, 255, 0.1);
}

.list-wrap .list-title {
  /*width: 100%;*/
  height: 0.8rem;
  padding: 0 0.3rem;
  font-size: 0.28rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #373e4f;
  line-height: 0.8rem;
  border-bottom: 1px solid #e8eaf0;
}

.list-title img {
  display: inline-block;
  position: relative;
  top: calc(0.3rem - 0.2rem);
  height: 0.4rem;
  width: 0.4rem;
}

.list-content {
  width: calc(100% - 0.6rem);
  margin: 0 0.3rem;
}

.list-content .list-content-title {
  width: 100%;
  height: 0.8rem;
  /* margin: 0 0.3rem; */
  font-size: 0.24rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #767d8f;
  line-height: 0.8rem;
  border-bottom: 1px solid #e8eaf0;
}

.list-content-title .circle {
  /* transform: scale(0.7); */
  width: 40rpx;
  height: 40rpx;
  border: 4rpx solid #999;
  border-radius: 100%;
}

.list-content-title .date {
  margin-left: 0.18rem;
}

.list-content-title .time {
  margin-left: 0.13rem;
}

.list-content .printf {
  float: right;
  font-size: 0.24rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(0, 119, 255, 1);
  line-height: 0.8rem;
}

/* 每项商品 */
.goods {
  margin: 0.1rem 0;
}

.goods-title,
.goods-content {
  width: 100%;
}

.goods .goods-title {
  height: 0.6rem;
  font-size: 0.24rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #373e4f;
  line-height: 0.6rem;
}

.goods-title .goods-code {
  float: left;
}

.goods-title .goods-number {
  float: right;
}

.goods-img {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.02rem;
}

.goods-des {
  position: relative;
  width: calc(100% - 1.7rem);
  height: 1.5rem;
  float: right;
}

.goods-des .goods-word {
  overflow: hidden; /*超出部分隐藏*/
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  font-size: 0.26rem;
  font-weight: 500;
  color: rgba(55, 62, 79, 1);
  line-height: 0.3rem;
}

.goods-des .size {
  position: absolute;
  left: 0;
  bottom: 0.5rem;
  font-size: 0.24rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(118, 125, 143, 1);
  line-height: 0.3rem;
}

.goods-des .money {
  position: absolute;
  right: 0;
  bottom: 0.5rem;
  font-size: 0.24rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ff5353;
  line-height: 0.3rem;
}

.goods-des .num {
  position: absolute;
  right: 0;
  bottom: 0.2rem;
  font-size: 0.24rem;
  color: rgba(118, 125, 143, 1);
  line-height: 0.3rem;
}

.grey {
  color: #767d8f;
}

.red {
  color: #ff5353;
}

.blank {
  color: #373e4f;
}

/* 商品统计信息 */
.item-count {
  width: 100%;
  height: 0.8rem;
  float: right;
  color: #767d8f;
  font-size: 0.24rem;
  line-height: 0.8rem;
  border-top: 1px solid #e8eaf0;
}

.item-count .goods-sum {
  margin-right: 0.3rem;
}

/* 列表项address */
.list-foot {
  width: 100%;
  border-top: 1px solid #e8eaf0;
  line-height: 0.6rem;
}

.address,
.message {
  position: relative;
  width: calc(100% - 0.8rem);
  height: 1.2rem;
  margin: 0 auto;
  padding: 0.2rem 0;
  color: #767d8f;
}

.address {
  position: relative;
  padding-left: 0.7rem;
  font-size: 0.26rem;
}

.message {
  font-size: 0.24rem;
  color: #767d8f;
  border-top: 1px solid #e8eaf0;
}

.consignee {
  width: 90%;
  overflow: hidden; /*超出部分隐藏*/
  white-space: nowrap; /*规定段落中的文本不进行换行 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

.consignee .people {
  margin-right: 0.8rem;
}

.address-img {
  position: absolute;
  width: 0.24rem;
  height: 0.3rem;
  left: 0.3rem;
  top: calc(0.8rem - 0.15rem);
}

.address-arrow {
  position: absolute;
  width: 0.24rem;
  height: 0.3rem;
  right: 0.3rem;
  top: calc(0.8rem - 0.15rem);
}

.deliver,
.solve-btn {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 0.8rem;
  line-height: 0.8rem;
  padding: 0 0.3rem;
}

.deliver {
  font-size: 0.26rem;
  border-top: 1px solid #e8eaf0;
  border-bottom: 1px solid #e8eaf0;
}

.deliver img{
  height: 14px;
  width: 14px;
}

.solve-btn .printf-btn,
.post-btn {
  position: absolute;
  top: 0.15rem;
  right: 2.1rem;
  width: 1.5rem;
  height: 0.5rem;
  border-radius: 0.25rem;
  text-align: center;
  line-height: 0.5rem;
  font-size: 0.24rem;
  color: #ff8900;
  border: 1px solid #ff8900;
}

.solve-btn .post-btn {
  right: 0.3rem;
  color: #0077ff;
  border: 1px solid #0077ff;
}

/* 底部按钮 */
.foot a {
  width: 25%;
  height: 0.8rem;
  line-height: 0.8rem;
}

.order-bottom-btn1 {
  color: #fff;
  background-color: #ff8900;
}

.order-bottom-btn2 {
  color: #fff;
  background-color: #0077ff;
}

/* 统计数量 */
.order-count-text {
  color: #767d8f;
  margin-right: 0.2rem;
}

.order-count-num {
  color: #ff5353;
}

/* 全选按钮 */
.bottom-radio {
  color: #a3aab7;
  line-height: 38px;
  padding-left: 15px;
}

.radio-text {
  margin-left: -5px;
}

.radio-text.active {
  color: #0077ff;
}
/* 箭头 */
.add-ren-ft {
  display: inline-block;
  position: absolute;
  right: 0.3rem;
  top: calc(50% - 0.04rem);
  height: 0.16rem;
  width: 0.16rem;
  border-width: 2px 2px 0 0;
  border-color: #b2b2b2;
  border-style: solid;
  -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
}
.message .add-ren-ft {
  right: 0;
}
</style>
